<template>
    <div class="r-page mx-5-t" >
        <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
        <!-- <div class="type-bar"> style="background-color: #171a1f"
            <img :src="tokens.getImg(coin)" class="icon-img" />
            <span class="c-title-2">{{coin}}</span>
        </div> -->
        <!-- <div style="height: 20px;"></div> -->

        <CoinState style="margin-top: 0;" :coin="coin"></CoinState>
        <Chart ref="chart"></Chart>

        <!-- <div class="about">
            <div class="a-title c-title-3 c-bold">{{ $t('message.Cion.a') }}{{ coin.symbol }}</div>
            <div class="a-content c-title-5">
                {{ getDesc }}
                <br />
            </div>
        </div> -->
        <!-- {{ $t('message.Cion.c') }} -->
        <!-- <Skill></Skill> -->
        <Position></Position>
        <div style="height: 20px;"></div>
        <!-- <NavTitle :is-more="false" title="链上活动">
            <Lines></Lines>
        </NavTitle>
        <Activity></Activity> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import CoinState from "./components/CoinState/CoinState.vue";
// import Skill from "./components/skill/index.vue"
// import Chart from "./components/chart/index.vue"
import Chart from "@/components/chart/index.vue";
import Position from "./components/position/index.vue";
import { useRoute } from "vue-router";
import { useTokens } from "@/stores/tokens";
import { URL_COIN_PAIR_DETAIL } from "@/comm/api";
import { get } from "@/comm/request";
import { onBeforeMount } from "vue";
import { useKline } from "@/stores/kline";
import { ICoin } from "./type";
import i18n from "@/locals";
const kline = useKline();

const route = useRoute();
const coin = ref<ICoin>({} as any);
const tokens = useTokens();

onMounted(async () => {
    console.warn("##jsz", route.name);
    kline.changeCoinToDay(route.params.id + "");
    console.log("coin detail onMounted", route);
    let res: any = await get(URL_COIN_PAIR_DETAIL.replace("@", route.params.id + ""));
    console.log(res, "coin----");
    coin.value = res.data || {};
});

const getDesc = computed(() => {
    let lang = localStorage.getItem("language") || "zh";
    let map: any = { zh: "CN", en: "EN" };
    let item = coin.value.details.find(i => i.language == map[lang]);
    if (item) {
        return item.description;
    }
    return "";
});

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "币",
        title: i18n.global.t("message.Global.child.a"),
        disabled: true,
        href: ""
    }
]);

const list = ref<any[]>([]);
onMounted(() => {
    for (let i = 0; i < 40; i++) {
        addItem();
    }

    setTimeout(() => {
        for (let i = 0; i < 40; i++) {
            addItem();
        }
    }, 3000);
});

const addItem = () => {
    list.value.push({ num: Math.random() });
};
</script>

<style lang="less" scoped>
@import url("./index.less");
.mx-5-t{
    margin: 0 var(--space)  ;
    background-color: #1c1f25;
}
.jjt {
    height: 240px;
    width: 400px;
    border: solid 1px #f0f0f0;
    margin: 40px auto;

    .jjt-item {
        width: 100%;
        background: #048096;
        color: #fff;
        padding: 4px;
        margin-bottom: 2px;
    }
}
</style>
